<template>
	<view class="storeDetail">
		<u-navbar
			title="商品详情"
			@rightClick="rightClick"
			:autoBack="true"
		>
		</u-navbar>
		
		<view class="detail-banner">
			<u-swiper
					:list="listSwiper"
					height="375px"
					keyName="url"
					:indicatorMode="'dot'"
					:indicator="true"
					:indicatorActiveColor="'#EF312A'"
					:autoplay="false"
			></u-swiper>
		</view>
		
		<view style="padding: 15px;">
			<text class="tit-1">北斗信号弹TD10（北斗三号短报文应急示位搜救终端）</text>
			<view style="margin-top: 23px;font-size: 14px;display: flex;align-items: center;">
				<view style="flex: 1">
					<text>参考报价：</text>
					<text style="font-size: 24px;color: #FF0000;">￥999</text>
				</view>
				<view style="flex: 1">
					<text>历年中标价：</text>
					<text style="font-size: 14px;color: #FF0000;">￥999-￥9999</text>
				</view>
			</view>
			<view style="margin-top: 15px;font-size: 14px;display: flex;align-items: center;">
				<text>发布时间：</text>
				<text style="font-size: 14px;">2022-09-26 09：11：26</text>
			</view>
			<view style="margin-top: 15px;font-size: 14px;display: flex;align-items: center;">
				<text>所属单位：</text>
				<text style="font-size: 14px;">xxxxx公司</text>
			</view>
			<view style="margin-top: 15px;font-size: 14px;display: flex;align-items: center;">
				<text>联系方式：</text>
				<text style="font-size: 14px;">张经理 18574589632</text>
			</view>
			<view style="margin-top: 15px;font-size: 14px;display: flex;align-items: center;">
				<text>浏览总数：</text>
				<text style="font-size: 14px;">2003</text>
			</view>
			<view style="margin-top: 15px;font-size: 14px;display: flex;align-items: center;">
				<text class="detailBtn"  style="margin-right: 15px;">立即购买</text>
				<text class="detailBtn" style="background: rgba(223,41,34,0.1);;margin-right: 15px;border: 1px solid #EF312A;color: #EF312A;">采购咨询</text>
				<text class="detailBtn" style="background: rgba(223,41,34,0.1);;border: 1px solid #EF312A;color: #EF312A;">增加对比</text>
			</view>
			
		</view>
		
		<view style="width: 100%;height: 15px;background-color: #F7F8FA"></view>
			
		<view @click="toDetail" style="width: 100%;display: flex;padding: 15px;box-sizing: border-box;">
			<u--image src="" style="flex: 0 0 60px;margin-right: 10px;" width="60px" height="60px"></u--image>
			<view style="flex: 1;">
				<view style="font-size: 16px;color: #2E3033;margin-bottom: 10px;">xxxxx供应商</view>
				<view style="font-size: 16px;color: rgba(46, 48, 51, 0.6);">装备数量：25325个</view>
			</view>
		</view>
		<view style="width: 100%;height: 15px;background-color: #F7F8FA"></view>
		
		<view class="contentList" style="box-sizing: border-box;padding: 15px;">
			<u-scroll-list :indicator="false">
		        <view @click="bindDetailBar(index)" v-for="(item, index) in detailBar" :key="index" style="display: inline-block;flex: 0 0 70px;;font-size: 14px;;">
		            <text 
					:style="{color: detailBarIndex == index ? '#EF312A' : '#2E3033'}" 
					style="width: 100%;display: inline-block;margin-right: 30px;color: #2E3033;">{{item}}</text>
		        </view>
		    </u-scroll-list>	
			<view style="border: 1px solid #2e30330d;margin-top: 15px;" v-if="detailBarIndex == 0">
				<view style="background: #2e30330d;height: 52px;font-size: 16px;text-align: left;line-height: 52px;padding-left: 15px;">装备基本信息</view>
				<view style="border-bottom: 1px solid #eee;display: flex;justify-content: center;align-items: center;height: 70px;min-height: 50px;box-sizing: border-box;font-size: 14px;color: #2E3033;">
					<view style="flex: 0 0 80px;border-right: 1px solid #eee;display: flex;align-items: center;height: 100%;justify-content: center;">装备名称</view>
					<view style="flex: 1;padding: 15px;">北斗信号弹TD10(北斗三号短报文应急示位搜救终端)</view>
				</view>
				<view style="border-bottom: 1px solid #eee;display: flex;justify-content: center;align-items: center;height: auto;min-height: 50px;box-sizing: border-box;font-size: 14px;color: #2E3033;">
					<view style="flex: 0 0 80px;display: flex;align-items: center;height: 100%;justify-content: center;">摘要</view>
					<view style="flex: 1;padding: 15px;border-left: 1px solid #eee;">北斗信号弹TD10(北斗三号短报文便携
					式樓救终端)是一款人员落水报警器，具
					有北斗三号单向短报文通信、北斗/GPS
					 定位、落水自动报警、-键 SOS 主动报
					曾等功能，是专门为应急救援场景而研
					制的机型。</view>
				</view>
			</view>
			<!-- 规格 -->
			<view style="border: 1px solid #2e30330d;margin-top: 15px;" v-if="detailBarIndex == 1">
				<view style="background: #2e30330d;height: 52px;font-size: 16px;text-align: left;line-height: 52px;padding-left: 15px;">装备参数规格</view>
				<view style="border-bottom: 1px solid #eee;display: flex;justify-content: center;align-items: center;height: 70px;min-height: 50px;box-sizing: border-box;font-size: 14px;color: #2E3033;">
					<view style="flex: 0 0 80px;border-right: 1px solid #eee;display: flex;align-items: center;height: 100%;justify-content: center;">产品尺寸</view>
					<view style="flex: 1;padding: 15px;">135mm*30mm*23mm</view>
				</view>
				<view style="border-bottom: 1px solid #eee;display: flex;justify-content: center;align-items: center;height: auto;min-height: 50px;box-sizing: border-box;font-size: 14px;color: #2E3033;">
					<view style="flex: 0 0 80px;display: flex;align-items: center;height: 100%;justify-content: center;">整机重量</view>
					<view style="flex: 1;padding: 15px;border-left: 1px solid #eee;">100 g</view>
				</view>
			</view>
			
			<!-- 教学 -->
			<view v-if="detailBarIndex == 2">
				<view style="background: #2e30330d;height: 52px;font-size: 16px;text-align: left;line-height: 52px;padding-left: 15px;margin-bottom: 20px;">
					<text>教学中心</text>
					<view style="margin-top: 8px;float: right;display: inline-block;font-size: 14px;color: #2E3033;">
						<u-radio-group
						    v-model="radiovalue"
						    placement="row"
						    @change="groupChange"
						  >
						    <u-radio
						      v-for="(item, index) in radiolist"
						      :key="index"
						      :label="item.name"
						      :name="item.name"
							  shape="square"
							  size="30"
							  activeColor="#EF312A"
						      @change="radioChange"
						    >
						    </u-radio>
						  </u-radio-group>
					</view>
				</view>
				<view class="new-list">
					<view class="content-list">
						<u-row gutter="10" align="center" customStyle="margin-bottom: 10px">
							<u-col span="6" style="box-shadow: 0px 3px 6px 1px #EEE8E8;margin-right: 10px;">
								<view class="demo-layout bg-purple-light">
									<view style="width: 100%;height: 167px;position: relative;">
										<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%"></u--image>
										<view style="text-align: center;font-size: 12px;color: #fff;position: absolute;right: 0;bottom: 10px;width: 70px;height: 27px;line-height:27px;border-radius: 15px 0px 0px 15px;background: #2E3033;opacity: 0.6;">
											<u--image src="../../static/images/play.svg" style="vertical-align: middle;display: inline-block;" width="11px" height="11px"></u--image>
											<text style="display: inline-block;vertical-align: middle;margin-left: 5px;">53:38</text>
										</view>
									</view>
									<view style="text-align: left;box-sizing: border-box;padding: 15px;">
										<text style="display: block;color: #2E3033;font-size: 16px;">主要标题</text>
										<text style="display: block;color: rgba(46, 48, 51, 0.6);font-size: 14px;">5662次播放</text>
									</view>	
								</view>
							</u-col>
							<u-col span="6" style="box-shadow: 0px 3px 6px 1px #EEE8E8;">
								<view class="demo-layout bg-purple-light">
									<view style="width: 100%;height: 167px;position: relative;">
										<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%"></u--image>
										<view style="text-align: center;font-size: 12px;color: #fff;position: absolute;right: 0;bottom: 10px;width: 70px;height: 27px;line-height:27px;border-radius: 15px 0px 0px 15px;background: #2E3033;opacity: 0.6;">
											<u--image src="../../static/images/play.svg" style="vertical-align: middle;display: inline-block;" width="11px" height="11px"></u--image>
											<text style="display: inline-block;vertical-align: middle;margin-left: 5px;">53:38</text>
										</view>
									</view>
									<view style="text-align: left;box-sizing: border-box;padding: 15px;">
										<text style="display: block;color: #2E3033;font-size: 16px;">主要标题</text>
										<text style="display: block;color: rgba(46, 48, 51, 0.6);font-size: 14px;">5662次播放</text>
									</view>	
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			
			<!-- 评价 -->
			<view v-if="detailBarIndex == 3">
				<view style="background: #2e30330d;height: 52px;font-size: 16px;text-align: left;line-height: 52px;padding-left: 15px;margin-bottom: 20px;">装备评价（9523条）</view>
				<view class="evaluation">
					<view class="info-head">
						<view class="head-left">
							<u--image src="" style="" width="40px" height="40px"></u--image>
						</view>
						<view class="head-right">
							<text class="head-right-name">小阿罗</text>
							<view class="head-right-time">
								<text style="margin-right: 30px;">购买时间：2024-05-19</text>
								<text>购买地址：安徽</text>
							</view>
						</view>
					</view>
					<view class="info-content">
						优点：网上做了很多功课，最后选择了北斗信号弹，听
						说性价比高，也有叶槽质量做工一般的。也许是树大招
						风吧，希望质量给力，在我家多服役几年。
						缺点：外包装挺好的，外观漂亮，无瑕疵。打开里面包
						装也是完好，应该是全新枪。基站真重，而且放地上摩
						擦力特别大。。不会翻车。北斗信号弹挺好，希望质量
						给力吧。软件好用，连wifi挺快捷方便的，还能当移动
						监控用。。。
					</view>
					<view class="info-images">
						<u-scroll-list :indicator="false">
							<view v-for="(item) in 5" :key="index">
								<u--image src="" style="margin-right: 15px;" width="60px" height="60px"></u--image>
							</view>
						</u-scroll-list>
					</view>
					<view class="info-eval">
						<view class="eval" style="margin-right: 60px;">
							<u--image src="../../../static/images/icon-like.svg" style="margin-right: 10px;display: inline-block;vertical-align: middle;" width="16px" height="16px"></u--image>
							<text style="display: inline-block;vertical-align: middle;">点赞</text>
						</view>
						<view class="eval">
							<u--image src="../../../static/images/icon-eval.svg" style="margin-right: 10px;display: inline-block;vertical-align: middle;" width="16px" height="16px"></u--image>
							<text style="display: inline-block;vertical-align: middle;">评论</text>
						</view>
					</view>
					<view class="commentWrap">
						<view class="avatar">
							<u--image src="" style="" width="40px" height="40px"></u--image>
						</view>
						<view class="comment-info">
							<text style="display: block;color: rgba(46, 48, 51, 0.6);">普通用户1</text>
							<text style="display: block;margin: 10px 0;color: #2E3033;">我觉得非常可以我觉得非常可以我觉得非常可以我觉得非常可以</text>
							<view style="color: rgba(46, 48, 51, 0.6);">
								<text style="margin-right: 10px;">2024-05-19 16：56：33</text>
								<text>回复</text>
								<view style="display: inline-block;float: right;">
									<u--image src="../../../static/images/icon-like.svg" style="margin-right: 10px;display: inline-block;vertical-align: middle;" width="16px" height="16px"></u--image>
									<text style="display: inline-block;vertical-align: middle;">点赞</text>
								</view>
							</view>
						</view>
					</view>
					<u-divider text=""></u-divider>
				</view>
			</view>
			
			<!-- 评价 -->
			<view v-if="detailBarIndex == 4">
				<view style="background: #2e30330d;height: 52px;font-size: 16px;text-align: left;line-height: 52px;padding-left: 15px;margin-bottom: 20px;">装备评价（9523条）</view>
				<view class="evaluation">
					<view class="info-head">
						<view class="head-left">
							<u--image src="" style="" width="40px" height="40px"></u--image>
						</view>
						<view class="head-right">
							<text class="head-right-name">小阿罗</text>
							<view class="head-right-time">
								<text style="margin-right: 30px;">购买时间：2024-05-19</text>
								<text>购买地址：安徽</text>
							</view>
						</view>
					</view>
					<view class="info-content">
						优点：网上做了很多功课，最后选择了北斗信号弹，听
						说性价比高，也有叶槽质量做工一般的。也许是树大招
						风吧，希望质量给力，在我家多服役几年。
						缺点：外包装挺好的，外观漂亮，无瑕疵。打开里面包
						装也是完好，应该是全新枪。基站真重，而且放地上摩
						擦力特别大。。不会翻车。北斗信号弹挺好，希望质量
						给力吧。软件好用，连wifi挺快捷方便的，还能当移动
						监控用。。。
					</view>
					<view class="info-images">
						<u-scroll-list :indicator="false">
							<view v-for="(item) in 5" :key="index">
								<u--image src="" style="margin-right: 15px;" width="60px" height="60px"></u--image>
							</view>
						</u-scroll-list>
					</view>
					<view class="info-eval">
						<view class="eval" style="margin-right: 60px;">
							<u--image src="../../../static/images/icon-like.svg" style="margin-right: 10px;display: inline-block;vertical-align: middle;" width="16px" height="16px"></u--image>
							<text style="display: inline-block;vertical-align: middle;">点赞</text>
						</view>
						<view class="eval">
							<u--image src="../../../static/images/icon-eval.svg" style="margin-right: 10px;display: inline-block;vertical-align: middle;" width="16px" height="16px"></u--image>
							<text style="display: inline-block;vertical-align: middle;">评论</text>
						</view>
					</view>
					<view class="commentWrap">
						<view class="avatar">
							<u--image src="" style="" width="40px" height="40px"></u--image>
						</view>
						<view class="comment-info">
							<text style="display: block;color: rgba(46, 48, 51, 0.6);">普通用户1</text>
							<text style="display: block;margin: 10px 0;color: #2E3033;">我觉得非常可以我觉得非常可以我觉得非常可以我觉得非常可以</text>
							<view style="color: rgba(46, 48, 51, 0.6);">
								<text style="margin-right: 10px;">2024-05-19 16：56：33</text>
								<text>回复</text>
								<view style="display: inline-block;float: right;">
									<u--image src="../../../static/images/icon-like.svg" style="margin-right: 10px;display: inline-block;vertical-align: middle;" width="16px" height="16px"></u--image>
									<text style="display: inline-block;vertical-align: middle;">点赞</text>
								</view>
							</view>
						</view>
					</view>
					<u-divider text=""></u-divider>
				</view>
			
				<view class="combtn" @click="evaluation">
					<u--image src="../../../static/images/icon-edit.svg" style="vertical-align: middle;display: inline-block;" width="14px" height="14px"></u--image>
					<text style="vertical-align: middle;font-size: 14px;color: #fff;margin-left: 15px;">发表评论</text>
				</view>
			</view>
			
			<!-- 销售记录 -->
			<view v-if="detailBarIndex == 5">
				<view 
				style="background: #2e30330d;height: 52px;font-size: 16px;text-align: left;padding-left: 15px;padding-top: 15px;margin-bottom: 20px;">
				该商品历史成交总金额:3058884元， 成交总数量:612件
				</view>
				<view style="margin-top: 15px;border: 1px solid #eee;" :style="{width: wWidth + 'px'}">
					<view style="font-size: 14px;height: 50px;line-height: 50px;background: rgba(46, 48, 51,0.05)">
						<text style="display: inline-block;width: 50px;border-right: 1px solid #e4e4e4;text-align: center;">序号</text>
						<text style="display: inline-block;width: 100px;border-right: 1px solid #e4e4e4;text-align: center;">采购单位</text>
						<text style="display: inline-block;width: 65px;border-right: 1px solid #e4e4e4;text-align: center;">购买金额</text>
						<text style="display: inline-block;width: 70px;border-right: 1px solid #e4e4e4;text-align: center;">采购单位</text>
						<text style="display: inline-block;width: 67px;text-align: center;">供应商</text>
					</view>
					<view style="font-size: 14px;height: 50px;line-height: 50px;">
						<text style="display: inline-block;width: 50px;border-right: 1px solid #e4e4e4;text-align: center;">1</text>
						<text style="display: inline-block;width: 100px;border-right: 1px solid #e4e4e4;text-align: center;">南京大学</text>
						<text style="display: inline-block;width: 65px;border-right: 1px solid #e4e4e4;text-align: center;">1</text>
						<text style="display: inline-block;width: 70px;border-right: 1px solid #e4e4e4;text-align: center;color: #FFBD39;">4，450.00</text>
						<text 
						class="names" 
						style="display: inline-block;width: 67px;text-align: center;word-wrap: break-word;overflow-wrap: break-word;">
						南京琪懿</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 购买 -->
		<u-popup :show="showBuy" @close="buyClose" @open="buyOpen" round="15">
			<view class="buyWrap">
				<u--image src="../../../static/images/icon-close.svg" style="z-index: 670;position: absolute;top: 15px;right: 15px;width: 18px;height: 18px" width="14px" height="14px"></u--image>
				<view style="display: flex;">
					<view style="width: 80px;margin-right: 10px;">
						<u--image src="" style="" width="80px" height="80px"></u--image>
					</view>
					<view style="flex: 1;font-size: 14px;width: 105px;">
						<text style="display: block;color: #282C31;margin-bottom: 10px;">北斗信号弹TD10（北斗三号短报文应急示位搜救终端）</text>
						<text style="display: block;color: #EF312A;font-size: 20px;">￥9999.00</text>
					</view>
				</view>
				<view style="font-size: 14px;margin-top: 30px;">
					<view style="margin-bottom: 10px;">产品规格</view>
					<view class="tagWrap">
						<text class="tags tagsActive">北斗信号弹TD10</text>
						<text class="tags">北斗信号弹TD10</text>
					</view>
				</view>
				<view style="display: flex;margin-top: 30px;">
					<text style="flex: 1;font-size: 14px;">购买数量</text>
					<view style="flex: 0 0 100px;display: flex;">
						<u--image src="../../../static/images/icon-reduce.svg" style="" width="20px" height="20px"></u--image>
						<text style="flex: 1;display: inline-block;margin: 0 10px;font-size: 14px;text-align: center;"> 2</text>
						<u--image src="../../../static/images/icon-add.svg" style="" width="20px" height="20px"></u--image>
						
					</view>
				</view>
				<view class="buyBtn" @click="orderFlag">选好了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wWidth: null,
				detailBarIndex: 0,
				showBuy: true,
				studyRadio: 1,
				radiovalue: 1,
				detailBar: ['基本信息', '参数规格', '装备展示', '装备评价', '产品论坛', '销售记录'],
				listSwiper: [
					{
						url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东',
						poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						type: 'video'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '身无彩凤双飞翼，心有灵犀一点通',
						type: 'image'
					}
				],
				radiolist: [
					{
					  name: '看视频',
					  disabled: false
					},
					{
					  name: '看资料',
					  disabled: false
					}
				]
			}
		},
		created() {
			uni.getSystemInfo({
			  success: (info) => {
			    this.wWidth = info.windowWidth;
			  }
			});
		},
		methods: {
			rightClick() {},
			bindDetailBar(index) {
				this.detailBarIndex = index
			},
			groupChange() {},
			radioChange() {},
			evaluation() {
				uni.navigateTo({
					url: '/pages/components/evaluation/index'
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/components/supplier/index'
				})
			},
			buyOpen() {},
			buyClose() {
				this.showBuy = false
			},
			orderFlag() {
				uni.navigateTo({
					url: "/pages/components/mine/order"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeDetail {
		width: 100%;
		box-sizing: border-box;
		
		.detail-banner {
			width: 100%;
			height: 375px;
		}
		
		.tit-1 {
			font-size: 16px;
			color: #2E3033;
		}
	}
	
	.detailBtn {
		width: 105px;
		height: 40px;
		background: #EF312A;
		border-radius: 5px 5px 5px 5px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		
	}
	
	.evaluation {
		width: 95%;
		margin: 0 auto;
		
		.info-head {
			width: 100%;
			display: flex;
			font-size: 14px;
			
			.head-left {
				width: 40px;
				margin-right: 10px;
			}
			.head-right {
				flex: 1;
				display: flex;
				flex-direction: column;
				
				.head-right-name {
					margin-bottom: 3px;
				}
				.head-right-time {
					color: rgba(35, 33, 34, 0.6);
				}
			}
		}
		.info-content {
			font-size: 14px;
			color: #232122;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.info-eval {
			display: block;
		
			.eval {
				display: inline-block;
				width: 70px;
				font-size: 14px;
				
				text {
					color: rgba(35, 33, 34, 0.6);
				}
			}
		}
		
		.commentWrap {
			margin-top: 17px;
			display: flex;
			margin-bottom: 15px;
			
			.avatar {
				width: 40px;
				margin-right: 10px;
			}
			.comment-info {
				font-size: 14px;
			}
		}
	}
	
	.combtn {
		width: 345px;
		height: 40px;
		
		background: #EF312A;
		border-radius: 23px 23px 23px 23px;
		text-align: center;
		line-height: 40px;
		position: fixed;
		bottom: 10px;
		left: 0;right: 0;margin: 0 auto;
	}
	
	.new-list {
		width: 100%;
		display: block;
		margin-top: 30px;
		
		.new-list-tit {
			font-weight: normal;
			font-size: 16px;
			color: #EF312A;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 15px;
		}
		.new-list-tit-line {
			width: 100%;
			height: 2px;
			background: #EF312A;
			border-radius: 0px 0px 0px 0px;
		}
		.content-list {
			margin-top: 15px;;
		}
	}
	
	.buyWrap {
		width: 100%;
		box-sizing: border-box;
		height: 415px;
		position: relative;
		padding: 15px;
		
		.tagWrap {
			box-sizing: border-box;
			
			.tags {
				display: inline-block;
				box-sizing: border-box;
				padding: 6px 15px;
				background: #F0F2F5;
				border-radius: 5px;
				margin-right: 10px;
				
				&.tagsActive {
					background: rgba(223,41,34,0.1);
					border: 1px solid #EF312A;
					font-size: 12px;
					color: #EF312A;
				}
			}
			

		}
	}
	
	.buyBtn {
		position: absolute;
		width: 345px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		bottom: 0;
		left: 0;right: 0;
		background: #EF312A;
		border-radius: 10px;
		color: #fff;
		margin: 0 auto;
		text-align: center;
		
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-radio__text{
		font-size: 14px !important;
		line-height: 34px !important;
	}
	::v-deep .u-radio {
		height: 34px !important;
		margin-right: 15px;
	}
</style>